<template>
	<div class="ThicknessCps-view">
		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_1") }}
			</div>
			<el-select v-model="tabData.drwFlg" placeholder="" size="mini" class="input-style orange">
				<el-option v-for="item in indicates_type" :key="item.key" :label="item.value" :value="item.key">
				</el-option>
			</el-select>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_2") }}
			</div>
			<el-radio-group v-model="tabData.thckOrdr" class="radio-view">
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_1")
				}}</el-radio>
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_2")
				}}</el-radio>
				<div></div>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_3") }}
			</div>
			<el-radio-group v-model="tabData.thckSelect" class="radio-view">
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_3")
				}}</el-radio>
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_4")
				}}</el-radio>
				<el-radio :label="2">{{
					$t("message.environmentSetting.thickness.radio_5")
				}}</el-radio>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_4") }}
			</div>
			<el-radio-group v-model="tabData.groupSelect" class="radio-view">
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_3")
				}}</el-radio>
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_4")
				}}</el-radio>
				<el-radio :label="2">{{
					$t("message.environmentSetting.thickness.radio_5")
				}}</el-radio>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_5") }}
			</div>
			<el-radio-group v-model="tabData.thckType" class="radio-view">
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_6")
				}}</el-radio>
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_7")
				}}</el-radio>
				<div></div>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_6") }}
			</div>
			<el-radio-group v-model="tabData.thckCalType" class="radio-view">
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_8")
				}}</el-radio>
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_9")
				}}</el-radio>
				<el-radio :label="2">{{
					$t("message.environmentSetting.thickness.radio_10")
				}}</el-radio>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_7") }}
			</div>
			<el-radio-group v-model="tabData.yearView" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_11")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_12")
				}}</el-radio>
				<div></div>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_8") }}
			</div>
			<el-input v-model="tabData.crrMax" class="samll-ipt number-ipt tr orange"
				@input="tabData.crrMax = $setMyNum(tabData.crrMax, '3 - 0')"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.thickness.label_9")
			}}</span>
			<el-input v-model="tabData.crrSymb" class="samll-ipt number-ipt tr orange"
				@input="tabData.crrSymb = $setMaxLength(tabData.crrSymb, 5)"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.thickness.label_10")
			}}</span>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_11") }}
			</div>
			<span class="describe mgl0">{{
				$t("message.environmentSetting.thickness.label_12")
			}}</span>
			<el-input v-model="tabData.crrMark3" @input="tabData.crrMark3 = $setMaxLength(tabData.crrMark3, 2)"
				class="samll-ipt mgr24 tr orange"></el-input>
			<span class="describe mgl0">{{
				$t("message.environmentSetting.thickness.label_13")
			}}</span>
			<el-input v-model="tabData.crrMark1" @input="tabData.crrMark1 = $setMaxLength(tabData.crrMark1, 2)"
				class="samll-ipt mgr24 tr orange"></el-input>
			<span class="describe mgl0">{{
				$t("message.environmentSetting.thickness.label_14")
			}}</span>
			<el-input v-model="tabData.crrMark2" @input="tabData.crrMark2 = $setMaxLength(tabData.crrMark2, 2)"
				class="samll-ipt mgr24 tr orange"></el-input>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_15") }}
			</div>
			<el-radio-group v-model="tabData.crrView" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_13")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_14")
				}}</el-radio>
				<div></div>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_16") }}
			</div>
			<el-radio-group v-model="tabData.crrMarkDisp" class="radio-view">
				<el-radio :label="1">{{
					$t("message.environmentSetting.thickness.radio_13")
				}}</el-radio>
				<el-radio :label="0">{{
					$t("message.environmentSetting.thickness.radio_14")
				}}</el-radio>
				<div></div>
			</el-radio-group>
		</div>

		<div class="row-itme">
			<div class="label">
				{{ $t("message.environmentSetting.thickness.label_17") }}
			</div>
			<el-input v-model="tabData.rbiNum" class="samll-ipt tr orange mgr24"
				oninput="if(value){value=value.replace(/[^0-9.]/g, '')} if(value<0){value=0} if(value>1){value='1.0'}"></el-input>
			<span class="describe mgl0">{{
				$t("message.environmentSetting.thickness.label_18")
			}}</span>
			<el-input v-model="tabData.rbiMax" class="samll-ipt tr orange"
				oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=0} if(value>99){value=99}"></el-input>
			<span class="describe">{{
				$t("message.environmentSetting.thickness.label_19")
			}}</span>
		</div>

		<div class="row-itme">
			<div class="label long">
				{{ $t("message.environmentSetting.thickness.label_20") }}
			</div>
		</div>

		<div class="row-itme">
			<div class="check-input-view" v-for="i in garbage" :key="i.thkOptName">
				<el-checkbox v-model="i.thkOpt"></el-checkbox>
				<el-input :disabled="!i.thkOpt" :class="i.thkOpt ? 'check-ipt orange' : ''" v-model="tabData[i.thkNm]"
					class="mgl12" @input="tabData[i.thkNm] = $setMaxLength(tabData[i.thkNm], 20)"></el-input>
			</div>
		</div>

		<div class="row-itme">
			<div class="check-input-view" v-for="i in garbage2" :key="i.thkOptName">
				<el-checkbox v-model="i.thkOpt"></el-checkbox>
				<el-input :disabled="!i.thkOpt" :class="i.thkOpt ? 'check-ipt orange' : ''" v-model="tabData[i.thkNm]"
					class="mgl12" @input="tabData[i.thkNm] = $setMaxLength(tabData[i.thkNm], 20)"></el-input>
			</div>
		</div>

		<div class="footer">
			<el-button @click="getOptionApi">
				{{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
			</el-button>
			<el-button type="primary" class="okBTn" @click="saveData">
				{{ $t("message.environmentSetting.btns.bottomBtn.save") }}
			</el-button>
		</div>
	</div>
</template>

<script>
import { getOption, UpdateOption, GetRequiredTipsMsg } from "@/api/api.js";
import { getLocalStorage } from "@/utils/storage";
export default {
	name: "ThicknessCps",
	data() {
		return {
			value: "",
			options: "",
			radio: 3,
			checkList: [],
			tabData: {
				type: 2,
				drwFlg: null,
				thckOrdr: null,
				thckSelect: null,
				groupSelect: null,
				thckType: null,
				thckCalType: null,
				yearView: null,
				crrMax: null,
				crrSymb: "",
				crrMark1: "",
				crrMark2: "",
				crrMark3: "",
				crrView: null,
				crrMarkDisp: null,
				rbiNum: null,
				rbiMax: null,
				thkOpt01: null,
				thkOpt02: null,
				thkOpt03: null,
				thkOpt04: null,
				thkOpt05: null,
				thkOpt06: null,
				thkOpt07: null,
				thkOpt08: null,
				thkOpt09: null,
				thkOpt10: null,
				thkNm01: "",
				thkNm02: "",
				thkNm03: "",
				thkNm04: "",
				thkNm05: "",
				thkNm06: "",
				thkNm07: "",
				thkNm08: "",
				thkNm09: "",
				thkNm10: "",
			},
			indicates_type: [
				{
					value: this.$t("message.initSelect.label_9"),
					key: 1,
				},
				{
					value: this.$t("message.initSelect.label_10"),
					key: 2,
				},
				{
					value: this.$t("message.initSelect.label_11"),
					key: 3,
				},
			],
			garbage: [
				{
					thkOptName: "thkOpt01",
					thkNm: "thkNm01",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt02",
					thkNm: "thkNm02",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt03",
					thkNm: "thkNm03",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt04",
					thkNm: "thkNm04",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt05",
					thkNm: "thkNm05",
					thkOpt: false,
				},
			],
			garbage2: [
				{
					thkOptName: "thkOpt06",
					thkNm: "thkNm06",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt07",
					thkNm: "thkNm07",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt08",
					thkNm: "thkNm08",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt09",
					thkNm: "thkNm09",
					thkOpt: false,
				},
				{
					thkOptName: "thkOpt10",
					thkNm: "thkNm10",
					thkOpt: false,
				},
			],
		};
	},
	components: {},
	watch: {},
	methods: {
		DFn(item) {
			if (isNaN(item)) {
				return this.$setMaxLength(item, 4)
			}
			if (!isNaN(item)) {
				let arr = [3, 0];
				if (arr[1] == 0 && item.toString().indexOf('.') != -1) {
					item = item.toString().substr(0, item.toString().length - 1)
				}
				if (item.toString().indexOf('.') == -1) {  //没有小数点
					if (item.toString().length > arr[0]) {
						item = item.toString().substr(0, arr[0]);
					}
				} else {
					try {
						let testArr = item.toString().split('.');
						item = `${testArr[0].substr(0, arr[0])}.${testArr[1].substr(0, arr[1])}`
					} catch (error) {
					}
				}
				return Number(item)
			}
		},
		getOptionApi() {
			let dataJson = {
				drw_flg: 1,
				type: 2,
			};
			getOption(dataJson).then((res) => {
				console.log(res);
				if (res.data.code != 0) {
					return;
				}
				this.tabData = res.data.data;
				this.garbage.forEach((element) => {
					if (this.tabData[element.thkOptName] == 1) {
						element.thkOpt = true;
					}
				});
				this.garbage2.forEach((element) => {
					if (this.tabData[element.thkOptName] == 1) {
						element.thkOpt = true;
					}
				});
			});
		},
		async saveData() {
			console.log(this.tabData.rbiNum === '');
			if (this.tabData.crrMax == '' || this.tabData.crrSymb == ''
				|| this.tabData.crrMark2 == '' || this.tabData.crrMark3 == ''
				|| this.tabData.crrMark1 == '' || this.tabData.rbiNum === ''
				|| this.tabData.rbiMax == '') {
				let R = await GetRequiredTipsMsg();
				this.$alert(R.data.msg, {
					confirmButtonText: 'OK',
					type: 'warning',
					callback: action => {
					}
				});
				return
			}
			let flg = false;
			this.garbage.forEach(async (element) => {
				console.log(element, element.thkOpt, this.tabData[element.thkNm] == '');
				if (element.thkOpt) {
					this.tabData[element.thkOptName] = 1;
					if (this.tabData[element.thkNm] == '') {
						flg = true;
					}
				} else if (!element.thkOpt) {
					this.tabData[element.thkOptName] = 0;
				}
			});

			this.garbage2.forEach(async (element) => {
				if (element.thkOpt) {
					this.tabData[element.thkOptName] = 1;
					if (this.tabData[element.thkNm] == '') {
						flg = true;
					}
				} else if (!element.thkOpt) {
					this.tabData[element.thkOptName] = 0;
				}
			});
			if (flg) {
				let R = await GetRequiredTipsMsg();
				this.$alert(R.data.msg, {
					confirmButtonText: 'OK',
					type: 'warning',
					callback: action => {
					}
				});
				return
			}
			this.tabData.type = 2;
			this.tabData.crrMax = parseInt(this.tabData.crrMax);
			this.tabData.rbiNum = parseFloat(this.tabData.rbiNum);
			this.tabData.rbiMax = parseInt(this.tabData.rbiMax);
			this.tabData.UserId = getLocalStorage("userID");
			this.tabData.Account = getLocalStorage("userName");
			UpdateOption(this.tabData)
				.then((res) => {
					if (res.data.code != 0) {
						this.$alert(res.data.msg, '', {
	confirmButtonText: 'OK',
	type: 'warning',
});
						return;
					}
					this.$message({
						message: res.data.msg,
						type: "success",
					});
				})
				.catch(() => {
				});
		},
	},
	created() {
		this.getOptionApi();
	},
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.ThicknessCps-view {
	width: 100%;
	height: 100%;
	position: relative;
}

.row-itme {
	width: 100%;
	margin-bottom: 12px;
	height: 32px;
	display: flex;
	justify-content: flex-start;
	align-items: center;

	.label {
		width: 206px;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333333;
	}

	.long {
		width: 100%;
	}

	.long-label {
		width: 368px;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #333333;
	}

	.radio-view {
		padding: 0 24px;
		width: 382px;
		height: 32px;
		background: #ffffff;
		border-radius: 2px;
		border: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.input-style {
		width: 382px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: #333333;
			font-weight: bold;
		}

		::v-deep .el-input .el-select__caret {
			width: 32px;
			height: 32px;
		}

		::v-deep .el-input__suffix {
			right: 0;
			background: #f5f6f7;
			border: 1px solid #d9d9d9;
		}
	}

	.orange {
		::v-deep .el-input__inner {
			background: rgb(255, 222, 172) !important;
		}
	}

	.samll-ipt {
		width: 55px;
		height: 32px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: #333333;
			font-weight: bold;
		}
	}

	.number-ipt {
		width: 70px;
	}

	.check-ipt {
		width: 120px;
		height: 32px;

		::v-deep .el-input__inner {
			border: 1px solid #d9d9d9;
			height: 32px;
			background: #ffffe1;
			font-size: 14px;
			color: #333333;
			font-weight: bold;
		}
	}

	.describe {
		display: block;
		margin: 0 4px;
		font-size: 14px;
		color: #1f2329;
		// font-weight: bold;
	}

	.mgl0 {
		margin-left: 0;
	}

	.mgr24 {
		margin-right: 24px;
	}

	.mgl12 {
		margin-left: 12px;
	}

	::v-deep .el-checkbox__label {
		display: none;
	}

	.check-input-view {
		width: 146px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 24px;
	}
}

.footer {
	position: absolute;
	left: 0px;
	bottom: 50px;
	height: 32px;
	display: flex;

	button {
		width: 123px;
		height: 32px;
		// background: #ffffff;
		// border: 1px solid #d9d9d9;
		text-align: center;
		line-height: 32px;
		margin-right: 16px;
	}

	.okBTn {
		// background: #106ebe;
		// color: #fff;
	}
}

.tr {
	::v-deep .el-input__inner {
		text-align: right;
	}
}

::v-deep .el-radio__input.is-checked+.el-radio__label {
	color: #213d49;
}
</style>
